<template>
  <div>
    <!-- 头部tab -->
    <div class="top_tab">
      <div class="left" @click="back()">
        <img src="../assets/order_center/shangs.png">
      </div>
      <span>填写申请表</span>
      <div class="right">
      </div>
    </div>
		<div class="n"></div>
		
		<div class="biao">
			<div class="list">
				<div class="title">
					<span>结算账户信息</span>
				</div>
				<!-- <div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>结算账户类型</span>
					</div>
				<div class="lc">
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow type="label">
										<select slot="right" v-model="js_bus_type">
											<option value="支付宝">支付宝</option>
											<option value="银行卡">银行卡</option>
											<option value="其他">其他</option>
										</select>
								</yd-cell-item>
							</yd-cell-group>
						</div>
					</div>
				</div> -->
				<!-- <div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>结算账户人身份</span>
					</div>
					<div class="lc">
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow type="label">
										<select slot="right" v-model="js_bus_status">
												<option value="法人">法人</option>
												<option value="公司负责人">公司负责人</option>
												<option value="其他">其他</option>
										</select>
								</yd-cell-item>
							</yd-cell-group>
						</div>
					</div>
				</div> -->
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>开户行</span>
					</div>
					<input type="text" placeholder="请输入开户行名称" v-model="open_bank">
				</div>
				<!-- <div class="bar">
					<div class="name">
						<span>清算联行号</span>
					</div>
					<input type="text" placeholder="请输入清算联行号" v-model="qsli_bank_num">
				</div> -->
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>开户名</span>
					</div>
					<input type="text" placeholder="请输入开户名" v-model="open_name">
				</div>
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>收款账号</span>
					</div>
					<input type="text" placeholder="请输入收款账号" v-model="receive_num">
				</div>
				<!-- <div class="bar">
					<div class="name">
						<span>财务联系人</span>
					</div>
					<input type="text" placeholder="请输入财务联系人姓名" v-model="finance_name">
				</div>
				<div class="bar">
					<div class="name">
						<span>财务联系电话</span>
					</div>
					<input type="text" placeholder="请输入财务联系电话" v-model="finance_phone">
				</div> -->
			</div>
		</div>
		
   	<div class="btn">
			<button class="next" @click="Table_forthreeClick()">下一步</button>
		</div>
	</div>
</template>

<script>
import Vue from "vue";
import { CitySelect } from "vue-ydui/dist/lib.rem/cityselect";
Vue.component(CitySelect.name, CitySelect);
import District from "ydui-district/dist/jd_province_city_area_id";

import { CellGroup, CellItem } from "vue-ydui/dist/lib.rem/cell";
Vue.component(CellGroup.name, CellGroup);
Vue.component(CellItem.name, CellItem);

import { DateTime } from "vue-ydui/dist/lib.rem/datetime";
Vue.component(DateTime.name, DateTime);
export default {
  name: "Table_for",
  data() {
    return {
      // js_bus_type: "", //结算账户类型
      // js_bus_status: "", //结算账户人身份
      open_bank: "", //开户行
      // qsli_bank_num: "", //清算联行号
      open_name: "", //开户名
      receive_num: "", //收款账户
      // finance_name: "", //财务联系人
      // finance_phone: "" //财务联系电话
    };
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    },
    //提交下一步信息
    Table_forthreeClick() {
      //填写信息不能为空
      // if (!this.js_bus_type) {
      //   this.$dialog.toast({ mes: "请选择结算账户类型" });
      //   return;
      // }
      // if (!this.js_bus_status) {
      //   this.$dialog.toast({ mes: "请选择账户人身份" });
      //   return;
      // }
      if (!this.open_bank) {
        this.$dialog.toast({ mes: "请输入开户行" });
        return;
      }
      // if (!this.qsli_bank_num) {
      //   this.$dialog.toast({ mes: "请输入清算联行号" });
      //   return;
      // }
      if (!this.open_name) {
        this.$dialog.toast({ mes: "请输入开户名" });
        return;
      }
      if (!this.receive_num) {
        this.$dialog.toast({ mes: "请输入收款账户" });
        return;
      }
    //   if (!this.finance_name) {
    //     this.$dialog.toast({ mes: "请输入财务联系人" });
    //     return;
    //   }
    //   if (!this.finance_phone) {
    //     this.$dialog.toast({ mes: "请输入财务电话" });
    //     return;
	  // }
	  //数据保存的本地
	  // localStorage.setItem("js_bus_type", this.js_bus_type);
	  // localStorage.setItem("js_bus_status", this.js_bus_status);
	  localStorage.setItem("open_bank", this.open_bank);
	  // localStorage.setItem("qsli_bank_num", this.qsli_bank_num);
	  localStorage.setItem("open_name", this.open_name);
	  localStorage.setItem("receive_num", this.receive_num);
	  // localStorage.setItem("finance_name", this.finance_name);
	  // localStorage.setItem("finance_phone", this.finance_phone);
      this.$router.push("Table_forthree");
    }
  },
  created() {
    document.title = "结算账户信息";
  }
};
</script>


<style scoped>
.top_tab {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
  margin-bottom: 0.03rem;
  position: fixed;
  z-index: 999;
}
.top_tab span {
  color: #333;
  font-size: 0.36rem;
}
.top_tab .right {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab img {
  width: 0.43rem;
}
.n {
  height: 0.92rem;
}
.biao {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.list {
  width: 90%;
  background: #fff;
  border-radius: 20px;
  padding: 0.3rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list .title span {
  font-size: 0.32rem;
  color: #333;
}
.list .bar {
  width: 100%;
  height: 1.6rem;
  display: flex;
  flex-direction: column;
}
.list .bar .name {
  width: 100%;
  height: 0.8rem;
  display: flex;
  align-items: center;
}
.list .bar .name span {
  font-size: 0.28rem;
  margin-left: 0.1rem;
}
.list .bar .name img {
  width: 0.1rem;
  height: 0.1rem;
}
.list .bar input {
  border: 1px solid #949494;
  height: 0.8rem;
  border-radius: 5px;
  text-indent: .1rem;
}
.list .bar .adr {
  height: 0.8rem;
  border-radius: 5px;
}
.list .bar .lc {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.list .bar .adr input {
  border: none;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}
.btn .next {
  width: 90%;
  height: 0.9rem;
  background: #e63f3f;
  border: none;
  border-radius: 10px;
  font-size: 0.32rem;
  color: #fff;
}
.txt::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.05rem;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.28rem;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.25rem;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.25rem;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.25rem;
}
</style>
<style>
.adr .yd-cell {
  border: 1px solid #949494;
  height: 0.8rem !important;
  border-radius: 5px;
}
.adr .yd-cell-right {
  height: 0.8rem;
  min-height: 0;
}
.yd-cell:after {
  height: 0;
}
.lc {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.lc .inf {
  height: 0.8rem !important;
  width: 48.2%;
  border: 1px solid #949494;
  border-radius: 5px;
}
.yd-cell-right {
  min-height: 0;
}
.lc .inf .yd-cell {
  height: 0.6rem !important;
  margin-top: 0.03rem;
  overflow: hidden;
}
.lc .inf .yd-cell-right {
  height: 0.7rem !important;
}
.lc .inf .yd-cell-right select {
  height: 0.5rem !important;
}
.lc .inf .yd-cell-item {
  width: 90%;
  margin: 0 auto;
  height: 0.7rem;
}
</style>



